<template>
  <div class="farm-wrap">
    <div class="nav">
      <div class="nav_left">Active Pools</div>
      <div class="nav_right">
        <div class="r_title">Select paired assets</div>
        <div class="nav_box">
          <span
            v-for="(item, i) in navs"
            :key="i"
            :class="navIndex === i ? 'nav_active nav_item' : 'nav_item nav_default'"
            @click="onNavChange(i)"
            >{{ item }}</span
          >
        </div>
      </div>
    </div>
    <RenderPoolItem @openDetail="openDetail" />
    <div v-if="showDetail" class="detail_wrap">
      <div class="group">
        <RenderTitle :title="'Farm Swap XXXXXPool'" />
        <div v-for="(item, i) in pools" :key="i" class="pool_item">
          <label>{{ item.name }}</label>
          <div class="right_text">
            <div v-if="item.oldVal" class="fs-container">
              <div class="old_val">{{ item.oldVal }}</div>
              <img src="@/assets/icons/to.png" />
            </div>
            <div :class="item.className ? `${item.className} r_number` : 'r_number'">{{ item.value }}</div>
          </div>
        </div>
      </div>
      <div class="group">
        <RenderTitle :title="'How much would you like to add for farming?'" />
        <div class="farm_num">
          <div class="item">
            <div class="form_item">
              <div class="title">Available Balance :0.000</div>
              <div class="input_wrap">
                <input type="number" placeholder="0.00" />
                <div class="input-img">
                  <img class="img1" src="@/assets/icons/coin-4.png" />
                  <span> AAA</span>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="percent_box">
              <span
                v-for="(item, i) in percents"
                :key="i"
                :class="perIndex1 === i ? 'per_item per_active' : 'per_item'"
                @click="onPer1(i)"
              >
                {{ item }}
              </span>
            </div>
          </div>
        </div>
        <div class="farm_num">
          <div class="item">
            <div class="form_item">
              <div class="title">Available Balance :0.000</div>
              <div class="input_wrap">
                <input type="number" placeholder="0.00" />
                <div class="input-img"><img class="img1" src="@/assets/icons/coin-3.png" /><span> SPL</span></div>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="percent_box">
              <span
                v-for="(item, i) in percents"
                :key="i"
                :class="perIndex2 === i ? 'per_item per_active' : 'per_item'"
                @click="onPer2(i)"
              >
                {{ item }}
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="group">
        <RenderTitle :title="'Leverage'" />
        <div class="leverage_item">
          <span
            v-for="(item, i) in leverages"
            :key="i"
            :class="leverIndex === i ? 'num_box num_active' : 'num_box'"
            @click="onLever(i)"
          >
            {{ item.value }}
          </span>
        </div>
      </div>
      <div class="group">
        <RenderTitle :title="'Farm Swap XXXXXPool'" />
        <div v-for="(item, i) in summarys" :key="i" class="pool_item">
          <label>{{ item.name }}</label>
          <div class="r_number">{{ item.value }}</div>
        </div>
      </div>
      <div class="ops">
        <div><img src="@/assets/icons/back.png" /><span class="back">Back</span></div>
        <div class="ops-btn" @click="onApprpve">Apprpve</div>
      </div>
    </div>

    <div class="discrib">
      NonceBox·Finance is a leveraged yield farming product, and using leveraged products involves certain risks. Please
      read here to understand these risks. As a user of our protocol, you are in agreement that you are aware of these
      risks, and that all liability resides with you. So please don’t invest your life savings, or risk assets you can’t
      afford to lose. Try to be as careful with your funds as we are with our code
    </div>

    <Modal :footer="null" :visible="openModal1" :width="480" :title="''" @cancel="onCancel">
      <div class="ntoken-select">
        <div class="tip">Your Choice Leverage</div>
        <div class="n-wrap">
          <label class="name">token</label>
          <div>
            <Radio :checked="!radioValue" @change="onRadio"
              ><img class="img1" src="@/assets/icons/coin-3.png" /> SPL
            </Radio>
            <Radio :checked="radioValue" @change="onRadio"
              ><img class="img2" src="@/assets/icons/coin-4.png" />AAA
            </Radio>
          </div>
        </div>
        <div class="n-wrap">
          <label class="name">Quantity</label>
          <div class="btn-min-plus">
            <Icon type="plus" @click="onPlus(true)" />
            <input class="min-plus-input" maxLength="1" type="number" :value="leverNum" />
            <Icon type="minus" @click="onPlus(false)" />
          </div>
        </div>
        <Button type="primary" block style="height: 60px; font-size: 18px" @click="onBorrow">OK</Button>
      </div>
    </Modal>

    <Modal :footer="null" :visible="openModal2" :width="480" :title="''" @cancel="onCancel">
      <div class="ntoken-select">
        <div class="tip">Your return in total</div>
        <div class="n-wrap">
          <label class="name">token</label>
          <div>
            <Radio :checked="!radioValue" @change="onRadio"
              ><img class="img1" src="@/assets/icons/coin-3.png" /> SPL
            </Radio>
            <Radio :checked="radioValue" @change="onRadio"
              ><img class="img2" src="@/assets/icons/coin-4.png" />AAA
            </Radio>
          </div>
        </div>
        <div class="return-text">
          <label class="label">Principal：</label> <span class="span">{{ this.leverNum + '.00' }} </span>
        </div>
        <div class="return-text"><label class="label">Interest：</label> <span class="span">10.00 </span></div>
        <Button type="primary" block style="height: 60px; font-size: 18px" @click="onReturn">OK</Button>
      </div>
    </Modal>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import { mapState } from 'vuex'
import { Button, Modal, Icon, Radio } from 'ant-design-vue'
import { getUnixTs } from '@/utils'
import { stake, payBorrow, borrow } from '@/utils/create-demo'

export default Vue.extend({
  data() {
    return {
      percents: ['25%', '50%', '75%', '100%'],
      navs: ['All', 'SPL', 'SOL'],
      pools: [
        {
          name: 'Debt Value(min: 100.00 BUSD, max: 84,418,429.21)',
          value: '0.00'
        },
        { name: 'Yield Farm APR', value: '59.00%', oldVal: '19.66%' },
        { name: 'Borrowing Interest APR', value: '-39.99%', className: 'orange' },
        { name: 'Total APR', value: '59.00%', oldVal: '19.66%' },
        { name: 'Total APY', value: '59.00%', oldVal: '19.66%' }
      ],
      leverages: [
        { name: '', value: '1x' },
        { name: '', value: '2x' },
        { name: '', value: '2.5x' },
        { name: '', value: '3x' }
      ],
      summarys: [
        { name: 'Assets Supplied', value: '0 AAA  +  0 SPL' },
        { name: 'Assets Borrowed', value: '0.00 AAA' },
        {
          name: 'Total Assets in Positon Value',
          value: '0.000 AAA  +  0.000 SPL'
        }
      ],
      navIndex: 0,
      leverIndex: 0,
      perIndex1: 0,
      perIndex2: 0,
      showDetail: false,
      openModal1: false,
      openModal2: false,
      leverNum: 1,
      radioValue: false
    }
  },
  components: {
    Button,
    Modal,
    Icon,
    Radio
  },
  computed: {
    ...mapState(['wallet'])
  },
  methods: {
    onNavChange(i: number) {
      this.navIndex = i
    },
    onLever(i: number) {
      this.leverIndex = i
    },
    onPer1(i: number) {
      this.perIndex1 = i
    },
    onPer2(i: number) {
      this.perIndex2 = i
    },
    openDetail(type: number) {
      console.log(type)

      if (type === 1) {
        this.openModal1 = true
      } else if (type === 2) {
        this.showDetail = !this.showDetail
      } else {
        this.openModal2 = true
      }
    },
    onCancel() {
      this.openModal1 = false
      this.openModal2 = false
    },
    onApprpve() {
      const key = getUnixTs().toString()

      stake(this.$web3, this.$wallet)
        .then((txid) => {
          this.$notify.info({ key, message: 'Transaction has been sent', description: '' })
          const description = ''
          this.$accessor.transaction.sub({ txid, description })
        })
        .catch((error) => {
          this.$notify.info({ key, message: error, description: '' })
        })
    },
    onBorrow() {
      const key = getUnixTs().toString()

      payBorrow(this.$web3, this.$wallet)
        .then((txid) => {
          this.$notify.info({ key, message: 'Transaction has been sent', description: '' })
          const description = ''
          this.$accessor.transaction.sub({ txid, description })
          setTimeout(() => {
            this.openModal1 = false
          })
        })
        .catch((error) => {
          this.$notify.info({ key, message: error, description: '' })
        })
    },
    onReturn() {
      const key = getUnixTs().toString()
      borrow(this.$web3, this.$wallet)
        .then((txid) => {
          this.$notify.info({ key, message: 'Transaction has been sent', description: '' })
          const description = ''
          this.$accessor.transaction.sub({ txid, description })
          setTimeout(() => {
            this.openModal2 = false
          })
        })
        .catch((error) => {
          this.$notify.info({ key, message: error, description: '' })
        })
    },
    onPlus(bool: boolean) {
      if (bool) {
        if (this.leverNum === 6) {
          return
        }
        this.leverNum = this.leverNum + 1
      } else {
        if (this.leverNum === 0) {
          return
        }
        this.leverNum = this.leverNum - 1
      }
    },
    onRadio() {
      this.radioValue = !this.radioValue
    }
  }
})
</script>

<style lang="less" scoped>
@import '../styles/variables';

.farm-wrap {
  width: 1200px;
  margin: 100px auto 100px auto;
  .box_title {
    color: @p-color;
    font-family: @fre-font;
    font-size: 18px;
    margin-bottom: 24px;
    margin-top: 24px;
  }
  .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 24px;
    .nav_left {
      color: @p-color;
      font-size: 24px;
      font-family: @fre-font;
    }
    .nav_right {
      display: flex;
      align-items: center;
      .r_title {
        margin-right: 24px;
        color: #7a736c;
      }
      .nav_box {
        width: 280px;
        display: flex;
        justify-content: space-between;
        .nav_item {
          font-size: 14px;
          line-height: 36px;
          text-align: center;
          color: #fff;
          min-width: 84px;
          padding: 0 10px;
          height: 36px;
          border-radius: 12px;
          cursor: pointer;
        }
        .nav_default {
          background: #aaa49f;
        }
        .nav_active {
          background: @s-color;
        }
      }
    }
  }

  .group {
    border-bottom: 1px solid #ddd;
  }

  .pool_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    .r_number {
      color: @p-color;
      font-size: 18px;
      font-family: @fre-font;
    }
    .right_text {
      display: flex;
      align-items: center;
      .old_val {
        text-decoration: line-through;
        color: #7a736c;
        font-family: @fre-font;
        font-size: 18px;
      }

      img {
        margin: 0 10px;
      }
    }
    label {
      font-size: 18px;
      color: #7a736c;
    }
  }
  .farm_num {
    display: flex;
    margin-bottom: 36px;
    .item {
      width: 50%;
      &:nth-of-type(1) {
        margin-right: 12px;
      }
    }
  }
  .leverage_item {
    display: flex;
    margin-bottom: 36px;
    .num_box {
      width: 84px;
      background: #ddd;
      font-size: 14px;
      color: #7a736c;
      border-radius: 8px;
      margin-right: 48px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-weight: bold;
      cursor: pointer;
    }
    .num_active {
      background: #ffa348 !important;
      color: #fff;
    }
  }
  .form_item {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;

    .title {
      font-size: 14px;
      margin-bottom: 12px;
      color: #7a736c;
    }
    .input_wrap {
      background: #fff;
      border-radius: 12px;
      height: 48px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .input-img {
        padding-right: 12px;
        font-size: 14px;
        color: #7a736c;
        img {
          width: 24px;
          height: 24px;
          margin-right: 8px;
        }
      }
      input {
        width: 400px;
        outline: none;
        border: none;
        font-size: 18px;
        color: #400b01;
        height: 48px;
        border-radius: 8px;
        font-family: @fre-font;
        text-indent: 18px;
      }
    }
  }
  .percent_box {
    display: flex;
    justify-content: space-between;
    margin-top: 34px;
    .per_item {
      width: 120px;
      border: 1px solid #aaa49f;
      height: 48px;
      border-radius: 8px;
      text-align: center;
      line-height: 48px;
      cursor: pointer;
    }
    .per_active {
      color: @s-color !important;
      border: 1px solid @s-color !important;
    }
  }
  .detail_wrap {
    width: 1140px;
    background: fade(#fff, 40);
    padding: 12px 24px;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 0 0 24px 24px;
  }
  .ops {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 10px;
    .back {
      color: #aaa49f;
      font-weight: bold;
      cursor: pointer;
    }
    .ops-btn {
      width: 120px;
      height: 36px;
      border-radius: 18px;
      background: @s-color;
      line-height: 36px;
      color: #fff;
      text-align: center;
      cursor: pointer;
    }
  }
  .discrib {
    color: @gray-color;
    font-size: 18px;
    margin-top: 300px;
  }
}
.tip {
  text-align: center;
  font-size: 24px;
  font-family: @fre-font;
  margin: 20px 0;
}
.btn-min-plus {
  display: flex;
  justify-content: space-between;
  width: 180px;
  height: 60px;
  border-radius: 12px;
  border: 1px solid #f15726;
  align-items: center;
  padding: 0 12px;
  box-sizing: border-box;
  margin: 10px 0;
  i {
    font-size: 14px;
    color: #aaa49f;
    cursor: pointer;
  }
  .min-plus-input {
    outline: none;
    border: none;
    font-size: 18px;
    border-radius: 8px;
    font-family: @fre-font;
    text-indent: 18px;
    width: 70px;
    height: 34px;
    color: @s-color;
    text-align: center;
  }
}
.return-text {
  margin: 30px 0;
  font-size: 24px;
  display: flex;
  justify-content: space-between;
  .label {
    color: @p-color;
    font-weight: bold;
    font-size: 24px;
  }
  .span {
    font-family: @fre-font;
    font-size: 24px;
  }
}
.n-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30px;
  align-items: center;
  .name {
    font-size: 24px;
    color: #400b01;
    font-weight: bold;
  }
  .img1,
  .img2 {
    width: 31px;
    height: 31px;
    margin-right: 4px;
  }
}
</style>
